<template>
    <div class="search-layout">
        <div class="search-input-layout">
            <el-input class="seatch-input" v-model="searchInput" placeholder="搜索关键字" @keyup.native.enter="search"
                @input="input">
                <el-dropdown slot="prepend" placement="bottom" @command="SelectCommand" trigger="click">
                    <span class="selectText" :class="searchClass">{{searchType}}</span>
                    <el-dropdown-menu slot="dropdown" :class="theme">
                        <el-dropdown-item class="search-dropdown-item text_gray" command="ALL">ALL</el-dropdown-item>
                        <el-dropdown-item class="search-dropdown-item text_green" command="GET">GET</el-dropdown-item>
                        <el-dropdown-item class="search-dropdown-item text_orange" command="POST">POST
                        </el-dropdown-item>
                        <el-dropdown-item class="search-dropdown-item text_blue" command="PUT">PUT</el-dropdown-item>
                        <el-dropdown-item class="search-dropdown-item text_red" command="DEL">DEL</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-input>
            <div class="clear" @click="clear" v-if="showList">
                <i class="el-icon-circle-close"></i>
            </div>
        </div>
        <div class="search-list-layout" width="250" v-if="showList">
            <div class="empty" v-if="!searchList.length">暂未查询到数据</div>
            <div class="file" v-for="apiValue in searchList" :key="apiValue.id"
                :class="{'active' : activeId == apiValue.id}" @click="active(apiValue)">
                <el-popover placement="right" trigger="hover">
                    <div class="folderCount" style="width: 250px;">标题：{{apiValue.title}}</div>
                    <div class="folderCount" style="width: 250px;">URL ：{{apiValue.url}}</div>
                    <div class="folderCount" style="width: 250px;" :class="typeClass[apiValue.type]">
                        类型 ：{{apiValue.type}}
                    </div>
                    <div class="folderCount" style="width: 250px;" :class="staticClass[apiValue.status]">
                        状态 ：{{staticName[apiValue.status]}}
                    </div>
                    <div class="folderCount" style="width: 250px;">备注 ：{{apiValue.description}}</div>
                    <div class="file-box" slot="reference">
                        <span class="state" :class="staticClass[apiValue.status]">
                            <i class="el-icon-star-on"></i>
                        </span>
                        <span class="file-type" :class="typeClass[apiValue.type]">{{apiValue.type}}</span>
                        <span class="file-title">{{apiValue.title}}</span>
                    </div>
                </el-popover>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                searchInput: '',
                theme: '',
                searchType: 'ALL',
                searchClass: 'text_gray',
                showList: false,
                searchList: [],
                typeClass: {
                    GET: 'text_green',
                    POST: 'text_orange',
                    PUT: 'text_blue',
                    DEL: 'text_red'
                },
                staticName: {
                    0: '设计中',
                    1: '进行中',
                    2: '异常',
                    3: '已完成',
                    4: '已废弃',
                    undefined: '',
                    null: '',
                },
                activeId: null,
                staticClass: {
                    0: 'text_orange',
                    1: 'text_blue',
                    2: 'text_red',
                    3: 'text_green',
                    4: 'text_gray',
                    undefined: 'text_transparent',
                    null: 'text_transparent',
                },
            }
        },
        methods: {
            active(item) {
                this.activeId = item.id;
                this.$store.dispatch('ApiActive/setActiveId', item.id)
            },
            search() {
                this.searchList = [];
                this.showList = true;

                // action=> 搜索
                window.action.api.searchApi(this.searchInput, this.searchType).then((res) => {
                    if (res) {
                        this.searchList = res
                    };
                });
            },
            clear() {
                this.showList = false;
                this.searchInput = '';
                this.SelectCommand('ALL');
            },
            input() {
                if (!this.searchInput) {
                    this.clear();
                };
            },
            SelectCommand(str) {
                this.searchType = str;
                switch (str) {
                    case 'ALL':
                        this.searchClass = 'text_gray';
                        break;
                    case 'GET':
                        this.searchClass = 'text_green';
                        break;
                    case 'POST':
                        this.searchClass = 'text_orange';
                        break;
                    case 'PUT':
                        this.searchClass = 'text_blue';
                        break;
                    case 'DEL':
                        this.searchClass = 'text_red';
                        break;
                }
                if (this.showList) {
                    this.search();
                };
            },
        },
    }

</script>